#monitors_live {
    overflow: hidden;
}

.mdl-card__media {
    background-color: #333;
    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-origin: padding-box;
    background-attachment: scroll;
    box-sizing: border-box;
}

.monitor_item .mdl-card__media {
    box-sizing: border-box;
    background-size: cover;
    padding: 24px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.monitor_item * {
    transition: 0.2s!important;
}
.monitor_item .mdl-card__supporting-text:not(:last-child) {
    box-sizing: border-box;
    padding: 10px 16px;
    min-height: auto;
}
.monitor_item .mdl-card__supporting-text{
    width: 100%;
}
.jpegMode .cpu_load .progress-bar,.jpegMode .ram_load .progress-bar{background-color:#5cb85c}
.jpegMode [system="jpegToggle"],[system].text-success{color:#5cb85c!important}

.monitor_item .stream-hud{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}
.monitor_item .stream-hud .camera_cpu_usage{position:absolute;top:0;left:0;width: 100%;}
.monitor_item .stream-hud .camera_cpu_usage .progress{width: 100%;}
.monitor_item .stream-hud .camera_cpu_usage:hover .progress{height:20px;transition:0.2s}
.monitor_item .stream-hud .controls{position:absolute;top:10px;left:10px;}
.monitor_item .stream-hud:hover{opacity:1}
.monitor_item .stream-hud .bottom-text{position:absolute;bottom:0;left:0;width:70%;padding:5px;text-shadow: 0 0 10px #333;}
.monitor_item .stream-hud:hover .bottom-text{top:0;}
.monitor_item .stream-hud .bottom-text .detector-fade{background: rgba(0,0,0,0.4);padding:10px 20px;border-radius:10px}
.monitor_item .stream-hud .lamp{position:absolute;top:5px;right:5px;z-index:1;text-shadow: 0 0 15px #333;}
.monitor_item .mdl-overlay-menu{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    min-width: 200px;
    height: 50%;
    min-height: 200px;
    overflow: auto;
    z-index: 100;
    background: rgba(0,0,0,0.7);
    color: #fff;
}
.monitor_item .mdl-overlay-menu-backdrop{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}
.monitor_item .mdl-overlay-menu{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    min-width: 200px;
    height: 50%;
    min-height: 150px;
    overflow: auto;
    z-index: 100;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
}
.monitor_item .mdl-overlay-menu li{
    padding: 1rem;
}
.monitor_item .mdl-overlay-menu li i{
    float: left;
    font-size: 1.5em;
}
.monitor_item .mdl-overlay-menu li:hover{
    background: #021B79;
}
.monitor_item[mode="Disabled"] .stream-hud .lamp{color:#5d5d5d}
.monitor_item[mode="Watch Only"] .stream-hud .lamp{color:#5da8e8}
.monitor_item[mode="Idle"] .stream-hud .lamp{color:#fff}
.monitor_item[mode="Record"] .stream-hud .lamp{color:#d9534f}
/*.data-menu{max-height:700px}*/
.data-menu.logs{list-style:none;}
.monitor_item .motionVision{display:none}

/* .monitor_item .grid-stack-item-content{width:100%!important;left:0!important;right:0!important;height:100%;} */
.monitor_item .ui-resizable-se {bottom: 10px!important;}
.monitor_item .stream-block{position: relative;text-align: center}
.monitor_item .mdl-data_window{overflow-x: auto;background:rgba(0,0,0,0.7);color:#fff;height:100%}
.monitor_item .mdl-data_window:not(.col-md-6){width:0;min-width:0;height:0px;min-height:0}


.monitor_item.fullscreen img.stream-element{height:100%;width:auto}
.monitor_item.fullscreen canvas.stream-element{height:auto;width:auto;background-color:black;}
.monitor_item .stream-element{border: 0;object-fit: fill;height: 100%;width:100%}
.monitor_item{position:relative;padding:0;transition:none;background:#000;height:100%;}
.monitor_item .mdl-card{min-height:auto;border:1px solid #272727;border-radius:0px;overflow:hidden}
.monitor_item .mdl-card__media{height:100%;position:relative;padding:0!important;display:inline-block!important;background:#000;}
.monitor_item.selected .stream-element{height:600px}
.monitor_item.selected .fa-expand:before{content:"\f066"}
.monitor_item .mdl-card__supporting-text{background:#222;color:#fff!important;display:block;min-height:auto!important}
.monitor_item.detector_triggered .detector-fade{opacity:1}
.monitor_item .detector-fade{opacity:0}
.monitor_item .indifference{position:absolute;width:100%;left:0;top:0;transition:0.2s;}
.monitor_item .progress{width:100%;background:#333;box-shadow:0;}
.monitor_item .indifference:hover .progress{height:20px;transition:0.2s}
.hide_indifference .indifference{display:none!important}
.hide_indifference [class_toggle="hide_indifference"]{color:#d9534f!important}
.monitor_item .mdl-card:not(.mdl-cell--4-col-desktop) .mdl-card__supporting-text .monitor_details{display:none;font-size:90%;margin-bottom:10px}
.monitor_item[mode="Record"] [mode="record"]{display:none}
.monitor_item[mode="Watch Only"] [mode="start"]{display:none}
.monitor_item .stream-hud .controls .btn{opacity:0.7}
.monitor_item.doObjectDetection .progress-bar{background-color: #57d94f}

.data-menu{text-align:left;height: 100%; overflow: auto;}
.data-menu .progress-circle{margin:0 10px 0 0;position:relative;height:40px;width:40px;float:left}
.data-menu .progress-circle span:after{content:''}
img.circle-img,div.circle-img{border-radius:50%;height:50px;width:50px}
.circle-img.sm{height:25px;width:25px}

@media screen and (max-width:1500px){
    .monitor_item .mdl-card__supporting-text .btn{
        padding: 5px 10px;
        font-size: 11px;
        line-height: 1.5;
    }
}

#monitors_live .monitor_item [class_toggle="show_logs"]{display:none}
#monitors_live .monitor_item .indifference{top:-5px}
#monitors_live .monitor_item .mdl-cell--8-col{width:100%;border:0;border-radius:0;margin:0;position:relative}
#monitors_live .monitor_item .mdl-cell--4-col-desktop,.monitor_item .mdl-card__supporting-text{display:none}
#monitors_live .monitor_item .mdl-card__supporting-text .monitor_details,#monitors_live .monitor_item .mdl-card__supporting-text .btn-group{display:none;text-align:center}
#monitors_live .monitor_item .mdl-card__supporting-text:not(.meta){display:block;position:absolute;bottom:0;left:0;height:0;padding:0;overflow:visible}
#monitors_live .monitor_item.show_data .mdl-card__supporting-text:not(.meta){width:50%}
#monitors_live .monitor_item.detector_triggered .mdl-card__supporting-text:not(.meta) .indifference{opacity:0.5;}
#monitors_live .monitor_item:hover .mdl-card__supporting-text:not(.meta){padding:15px;z-index:15;height:auto;}
#monitors_live .monitor_item:hover .mdl-card__supporting-text .monitor_details{display:block}
#monitors_live .monitor_item:hover .mdl-card__supporting-text .btn-group{display:inline-block}

.signal.green{background:#5cb85c}
[status="1"] .btn[video="launch"],[data-status="1"] .btn[video="launch"]{background:#337ab7;border-color:#337ab7}
[status="2"] .btn[launch="video"],[status="2"] .btn[video="launch"],[data-status="2"] .btn[video="launch"]{background:#a59100;border-color:#a59100}
.signal.red{background:#c9302c}



#monSectionStreamChannels,#monSectionInputMaps{margin-bottom: 15px;}
#monSectionStreamChannels:empty,#monSectionInputMaps:empty{display:none}


.dropdown-menu.scrollable{max-height:300px}
.upload_file input{display:none}
#video_preview .stream-objects{right:0;margin:auto;display:inline-block;position:relative;width:auto}
.stream-block,.stream-objects{overflow: hidden!important}
.stream-objects{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}
.stream-objects .tag{position:absolute;top:5px;left:5px;background:#d9534f;color:#fff;font-family:monospace;font-size:80%;border-radius: 15px;padding:3px 5px;line-height: 1}
.stream-objects .stream-detected-object{position:absolute;top:0;left:0;border:3px dotted red;background:transparent;border-radius:5px}
.stream-objects .stream-detected-point{position:absolute;top:0;left:0;border:3px solid yellow;background:transparent;border-radius:5px}
.stream-objects .point{position:absolute;top:0;left:0;border:3px solid red;border-radius:50%}
.stream-objects .matrix-info {
    margin-top: 1rem;
    background: rgba(0,0,0,0.3);
    color: #fff;
    width: 100%;
    padding: 1rem;
    font-family: monospace;
    z-index: 99;
    position: relative;
}
.stream-objects .matrix-info.yellow{
    color: yellow;
}
.monitor_item .gps-map {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 1px solid #333;
    z-index: 9;
    bottom: 10px;
    right: 10px;
}
.monitor_item .gps-map-details {
    position: absolute;
    padding: 5px 7px;
    border-radius: 25px;
    background:rgba(0,0,0,0.5);
    z-index: 11;
    top: 10px;
    right: 10px;
}
.dont-stretch-monitors .monitor_item .stream-element {
    object-fit: contain!important;
}
.grid-stack-item > .grid-stack-item-content {
    inset: 0!important;
    overflow-y: hidden!important;
}

.detector_triggered {
    border: 2px solid red;
    animation: border-pulsate-died 2s infinite;
}
